<template>
<div class="container">
          <!-- 图片区 -->
        <div class="avtor" style="position:absolute;top:50px;left:50px;">
          <img src="../assets/logo.png"/>
        </div>
    <el-col :span="8">
      <el-card shadow="hover" style="width:500px;position:absolute;top:150px;left:700px;"> 
            <el-form
            :model="user"
        >
            <el-form-item label-width="330px" label="STC在线评价系统"/>
            <el-form-item label="用户名">
            <el-input v-model="user.username" />
            </el-form-item>
            <el-form-item label="密码">
            <el-input v-model="user.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-radio-group v-model="radio" style="position:realtive;">
                <el-radio label="学生">学生</el-radio>
                <el-radio label="老师">老师</el-radio>
                <el-radio label="管理员">管理员</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button style="width:250px" @click="login()">登录</el-button>
            </el-form-item>
        </el-form>
      </el-card>
    </el-col>
     </div>
</template>
<script>
export default {
  // 创建了一个组件，组件的名字为name
  name: 'Home',
  data () {
    return {
      role: '管理员',
      user: {},
      radio: ''
    }
  },
  created () {
  },
  methods: {
      login() {
        console.log(this.radio)
        if (this.radio === '管理员') {
                this.$http({
            url: "/admin/login",
            params: {
                username: this.user.username,
                password: this.user.password
            }
        }).then(response => {
           window.sessionStorage.setItem('role', this.radio)
           window.sessionStorage.setItem('user', JSON.stringify(response.data))
           this.$router.push('/home')
        }).catch(error => {
         this.$message({
          message: '用户名或密码错误',
          type: 'error'
          });
        })
       } else if (this.radio === '学生') {
                 this.$http({
            url: "/student/login",
            params: {
                username: this.user.username,
                password: this.user.password
            }
        }).then(response => {
           window.sessionStorage.setItem('role', this.radio)
           window.sessionStorage.setItem('user', JSON.stringify(response.data))
           this.$router.push('/home')
        }).catch(error => {
         this.$message({
          message: '用户名或密码错误',
          type: 'error'
          });
        })
       } else if (this.radio === '老师') {
                 this.$http({
            url: "/teacher/login",
            params: {
                username: this.user.username,
                password: this.user.password
            }
        }).then(response => {
           window.sessionStorage.setItem('role', this.radio)
           window.sessionStorage.setItem('user', JSON.stringify(response.data))
           this.$router.push('/home')
        }).catch(error => {
         this.$message({
          message: '用户名或密码错误',
          type: 'error'
          });
        })
       }

      }
  }
}
</script>
<style>
#apps {
   position:absolute;top:20%;left:30%;
}
</style>